<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的自定义事件</title>
</head>
<body>

<!--很绕，学完立刻编码加深印象-->

<div id="app">
    {{message}}
    <html-a v-on:child-event="parentFn"></html-a>
</div>


<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //创建一个Vue对象
    //父组件
    const app = new Vue({
        el : '#app',
        data : {
            message : 'Hello, Vue!'
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        name : 'Mr.Lee'
                    }
                },
                template : `
                      <div>
                            <button v-on:click="childClick(name)">{{name}}</button>
                      </div>
                `,
                methods : {
                    childClick(name) {
                        this.$emit('child-event', name)
                    }
                }
            }
        },

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {
            parentFn(name) {
                this.message = name;
                console.log('子组件传递给父组件！' + name);
            }
        }
    });










</script>
</body>
</html>
